<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head>
<th:block th:include="common/common_head :: commonHeader('扣款单新增')" />
<link th:href="@{/static/css/plugins/cropper/cropper.min.css}" rel="stylesheet">
</head>

<body class="gray-bg">

	<div class="wrapper wrapper-content animated fadeInRight">
		<form class="form-horizontal" method="post"
			id="nproPurchRequestHeaderForm">
			<div class="row">
				<div class="form-group">
					<div class="col-sm-8" style="margin-left: 16px">
						<input class="btn btn-primary" type="button" onclick="save()"
							value="保存">
						<button class="btn btn-primary" type="button"
							onclick="Dialog.closeFrame(window.name)">取 消</button>
					</div>
				</div>
				<div>
					<div class="ibox float-e-margins">
						<div class="ibox-content" id="dataTitle">
							<div class="form-group">
								<label class="col-xs-1 control-label">扣款类型：</label>
								<div class="col-xs-3">
									<select class="form-control" id="coType" name="coType"
										sysDict="KKLX" emptyFirst="false"></select>
								</div>
								<label class="col-xs-1 control-label">采购订单号：</label>
								<div class="col-xs-3">
									<!-- <input name="poNo" id="poNo" type="text" class="form-control" /> -->
									<select class="form-control" id="poNo" name="poNo"><option value=''></option></select>
								</div>
								<label class="col-xs-1 control-label">采购组：</label>
								<div class="col-xs-3">
									<input name="purchGroup" id="purchGroup" type="text" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-1 control-label">供应商编码：</label>
								<div class="col-xs-3">
									<input name="vendorCode" id="vendorCode" type="text" class="form-control" />
								</div>
								<label class="col-xs-1 control-label">供应商名称：</label>
								<div class="col-xs-3">
									<input name="vendorName" id="vendorName" type="text" class="form-control" />
								</div>
								<label class="col-xs-1 control-label">公司代码：</label>
								<div class="col-xs-3">
									<input name="companyCode" id="companyCode" type="text" class="form-control" />
								</div>
							</div>

						</div>
						<div class="ibox-content">
							<div class="table-responsive">
								<table class="table table-bordered text-nowrap" id="para_table">
									<thead>
										<tr>
											<th>采购订单号</th>
											<th>行项目号</th>
											<th>物料编码</th>
											<th>物料描述</th>
											<th>扣款发票号</th>
											<th>发票金额</th>
											<th>扣款金额</th>
											<th>应付金额</th>
											<th>货币单位</th>
											<th>发票日期</th>
											<th>抱怨日期</th>
											<th>备注</th>
										</tr>
									</thead>
									<tbody></tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>

	<!--引入公共js-->
	<div th:include="common/onload_js :: onloadJS"></div>
	<!-- Chosen -->
	<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>

	<script type="text/javascript">
        $(function() {
	        initDictDataSel();//初始化所有字典数据
	        initPoNoSel();//初始化订单号选择框
        });
        
        //初始化订单号选择框
        function initPoNoSel() {
        	var poNoSel = $("#poNo");
            Page.ajaxGET(ctxPath + "/cutpayHeader/poNosForAdd", null, function(o) {
                var res = o.result;
                for(var i = 0; i < res.length; i++) {
                	poNoSel.append("<option value='" + res[i] + "'>" + res[i] + "</option>");// 添加option
                }
                poNoSel.change(function(){
                	var poNo = $(this).val();
                	initDetailData(poNo);
                });
            }, {"loadingMsg" : "正在初始化页面数据……"});
        }
        
        function initDetailData(poNo) {
            Page.ajaxGET(ctxPath + "/cutpayHeader/detailDataForAdd", {"poNo":poNo}, function(o) {
                var res = o.result;
                //{"companyCode":"1000","purchGroup":"200","poNo":"4800000007","vendorName":"上海铭化印刷器材有限公司",
               //"items":[{"poNo":"4800000007","sumMoney":7300,"materialDesc":"0201中基板流程網版（G1）",
               //"dateFp":"2019-05-07 00:00:00","materialCode":null,	"itemNo":"20","invoiceNo":"111","currencyCode":"CNY"}],	"vendorCode":"10131"}
                /**
				<th>采购订单号</th><th>行项目号</th><th>物料编码</th><th>物料描述</th><th>扣款发票号</th><th>发票金额</th><th>扣款金额</th><th>应付金额</th><th>货币单位</th>	<th>发票日期</th><th>抱怨日期</th><th>备注</th>
				**/
                $("#para_table tbody").html("");
                $("#purchGroup").val(res.purchGroup);
                $("#vendorCode").val(res.vendorCode);
                $("#vendorName").val(res.vendorName);
                $("#companyCode").val(res.companyCode);
                var idx = 0;
                for(var i=0; i < res.items.length; i++) {
                	var item = res.items[i];
        	        var trCode = "<tr name='itemTr' id='itemTr_"+ idx +"'>";
        	        trCode += "<td width='110px'>" + item.poNo + "</td>";//订单号
        	        trCode += "<td width='110px' name='itemNo'>" + item.itemNo + "</td>";//行项目号
        	        trCode += "<td width='110px'>" + item.materialCode + "</td>";//物料编码
        	        trCode += "<td width='110px'>" + item.materialDesc + "</td>";//物料描述
        	        trCode += "<td width='110px'>" + item.invoiceNo + "</td>";//发票号
        	        trCode += "<td width='110px' name='sumMoney'>" + item.sumMoney + "</td>";//发票金额
        	        trCode += "<td width='110px'><input style='width:95%' type='text' name='cutMoney' value='0' id='cutMoney_" + idx + "' /></td>";//扣款金额
        	        trCode += "<td width='110px' name='payMoney'>" + item.sumMoney + "</td>";//应付金额
        	        trCode += "<td width='110px'>" + item.currencyCode + "</td>";//货币单位
        	        trCode += "<td width='110px'>" + item.dateFp + "</td>";//发票日期
        	        trCode += "<td width='110px'><input style='width:95%' type='text' name='complainDate' id='complainDate_" + idx + "' /></td>";//抱怨日期
        	        trCode += "<td width='110px' name='remark'><input style='width:95%' type='text' name='remark' /></td>";//备注
        	        trCode += "</tr>";
        	        $("#para_table tbody").append(trCode);
        	        
        	        // 初始化时间插件
        	        laydate.render({elem : '#complainDate_' + idx});
        	        //添加扣款金额输入事件
        	        
        	        $("#cutMoney_" + idx).change(function(){
        	        	var _this = $(this);
        	        	var _thisVal = _this.val();
        	        	var row = _this.parent().parent();
        	        	var sumMoneyCell = row.find("td[name='sumMoney']");
        	        	var payMoneyCell = row.find("td[name='payMoney']");
        	        	if(!isNaN(_thisVal)) {
        	        		payMoneyCell.html(parseFloat(sumMoneyCell.html()) - parseFloat(_thisVal));
        	        	 }
        	        });
        	        idx++;
                }
            }, {"loadingMsg" : "正在与服务器通讯……"});
        }

        /**
         * 封装并提交数据
         **/
        function save() {
        	var params = {"coType" : $("#coType").val(), "poNo" : $("#poNo").val(), "companyCode" :  $("#companyCode").val()};
        	var items = [];
        	var itemRows = $("#para_table tbody").find("tr[name='itemTr']");
        	itemRows.each(function(i, e) {
        		var _e = $(e);
        		var cutMoney = _e.find("input[name='cutMoney']").val();
        		var itemNo = _e.find("td[name='itemNo']").html();
        		var complainDate = _e.find("input[name='complainDate']").val();
        		var remark = _e.find("input[name='remark']").val();
        		items.push({"itemNo" : itemNo, "cutMoney" : cutMoney, "complainDate" : complainDate, "remark" : remark});
        	});
        	params["items"] = items;
        	
			Page.ajaxPOST(ctxPath + "/cutpayHeader/saveData", JSON.stringify(params), function(o) {
				Dialog.msg("扣款单提交成功!");
				Dialog.closeFrame(window.name);
				parent.refresh();
			}, {contentType : "application/json;charsetset=utf-8", "loadingMsg" : "正在往服务器提交数据……"});
        }
	</script>

</body>
</html>
